<div id="term"></div>
<div id="background"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/winbox.bundle.js"></script>
<script>
var win = new WinBox("Terminal", {
    mount: term,
    width: 570,
    height: 300,
    minWidth: 100,
    minHeight: 30,
    x: "center",
    y: "center",
    index: 10
});
var color = parseColor($(term).css('--color'));
var runAnimation = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

function parseColor(color) {
    if (color.startsWith('#')) {
        return color;
    }
    var m = color.match(/rgb\(([0-9]+)\s*,?\s*([0-9]+)\s*,?\s*([0-9]+)\)/);
    if (m) {
        return '#' + m.slice(1).map(num => {
            return parseInt(num).toString(16).padStart('0', 2);
        }).join('');
    }
    throw new Error('Invalid Color');
}

particlesJS("background", {
    "particles": {
        "number": {
            "value": 80,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": color
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
                "enable": false,
                "speed": runAnimation ? 1 : 0,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 3,
            "random": true,
            "anim": {
                "enable": false,
                "speed": runAnimation ? 40 : 0,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 150,
            "color": color,
            "opacity": 0.4,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": runAnimation ? 6 : 0,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": runAnimation ? {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "grab"
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 143.85614385614386,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 200,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    } : {
        "events": {
            "onhover": {
                "enable": false
            },
            "onclick": {
                "enable": false
            }
        }
    },
    "retina_detect": true
});
</script>
